<template>
  <div class="stat-card">
    <div class="chart-title">
      设备使用率统计
    </div>
    <div class="stat-content">
      <!-- 左侧饼图区域 - 占一半 -->
      <div class="chart-container">
        <div class="circle-progress" id="deviceStatusChart"></div>
        <!-- 设备总数显示在饼图中央 -->
        <div class="device-total-center">
          <div class="total-label">可检测</div>
          <div class="total-number">{{ totalDevices }}台设备</div>
        </div>
      </div>

      <!-- 右侧状态图例区域 - 占一半 -->
      <div class="stat-legend">
        <div class="legend-item" v-for="item in legendData" :key="item.name">
          <div class="legend-dot" :style="{ backgroundColor: item.color }"></div>
          <span class="legend-name">{{ item.name }}</span>
          <span class="legend-percent">{{ item.percent }}%</span>
          <span class="legend-value">{{ item.value }}台</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'DeviceStatusChart',
  props: {
    deviceStatus: {
      type: Object,
      required: true
    },
    totalDevices: {
      type: Number,
      default: 35
    }
  },
  data() {
    return {
      deviceStatusChart: null
    }
  },
  computed: {
    legendData() {
      return [
        {
          name: '正常',
          color: '#52c41a',
          percent: this.deviceStatus.normalRate || 0,
          value: this.deviceStatus.normalCount || 0
        },
        {
          name: '故障',
          color: '#ff4d4f',
          percent: this.deviceStatus.warningRate || 0,
          value: this.deviceStatus.warningCount || 0
        },
        {
          name: '待机',
          color: '#faad14',
          percent: this.deviceStatus.waitingRate || 0,
          value: this.deviceStatus.waitingCount || 0
        },
        {
          name: '离线',
          color: '#8c8c8c',
          percent: this.deviceStatus.offlineRate || 0,
          value: this.deviceStatus.offlineCount || 0
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initDeviceStatusChart();
    });
  },
  beforeDestroy() {
    if (this.deviceStatusChart) {
      this.deviceStatusChart.dispose();
      this.deviceStatusChart = null;
    }
  },
  watch: {
    deviceStatus: {
      handler() {
        this.$nextTick(() => {
          this.initDeviceStatusChart();
        });
      },
      deep: true
    }
  },
  methods: {
    initDeviceStatusChart() {
      const chartContainer = document.getElementById('deviceStatusChart');
      if (!chartContainer) return;

      if (!this.deviceStatusChart) {
        this.deviceStatusChart = echarts.init(chartContainer);
      }

      const option = {
        backgroundColor: 'transparent',
        // 禁用提示框，不显示状态信息
        tooltip: {
          show: false
        },
        legend: {
          show: false
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            radius: ['75%', '95%'], // 增大内直径，让饼图更细
            center: ['48%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '18',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: this.deviceStatus.normalCount,
                name: '正常',
                itemStyle: { color: '#52c41a' }
              },
              {
                value: this.deviceStatus.warningCount,
                name: '故障',
                itemStyle: { color: '#ff4d4f' }
              },
              {
                value: this.deviceStatus.waitingCount,
                name: '待机',
                itemStyle: { color: '#faad14' }
              },
              {
                value: this.deviceStatus.offlineCount,
                name: '离线',
                itemStyle: { color: '#8c8c8c' }
              }
            ]
          }
        ]
      };

      this.deviceStatusChart.setOption(option);
    },

    updateCircleProgress() {
      this.$nextTick(() => {
        this.initDeviceStatusChart();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
@import './mixins/cardStyles.scss';

.stat-card {
  height: 400px;
  @include card-base-style;

  .chart-title {
    @include card-title-style;
  }

  .stat-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 10px;
    gap: 5px;

    // 左侧饼图区域 - 占一半
    .chart-container {
      flex: 0 0 50%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .circle-progress {
        width: 100%;
        height: 100%;
        max-width: 160px;
        max-height: 160px;
        background: transparent;
      }

      // 设备总数显示在饼图中央
      .device-total-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        pointer-events: none;
        width: 65%; // 与饼图内径匹配
        height: 65%; // 与饼图内径匹配
        border-radius: 50%;



        .total-label {
          color: #8f9bb3;
          font-size: 12px;
          font-weight: 500;
          margin-bottom: 6px;
          letter-spacing: 0.5px;
        }

        .total-number {
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          line-height: 1;
          margin-bottom: 4px;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .total-unit {
          color: #8f9bb3;
          font-size: 11px;
          font-weight: 500;
        }
      }
    }

    // 右侧图例区域 - 占一半
    .stat-legend {
      flex: 0 0 50%;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-right: 20px;

      .legend-item {
        display: flex;
        align-items: center;

        transition: all 0.3s ease;

        &:hover {
          transform: translateX(2px);
        }

        .legend-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-right: 12px;
          flex-shrink: 0;
          box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
        }

        .legend-name {
          color: #fff;
          font-size: 12px;
          font-weight: 500;
          margin-right: auto;
          min-width: 0;
          white-space: nowrap;
        }

        .legend-percent {
          color: #fff;
          font-size: 12px;
          font-weight: bold;
          margin-right: 8px;
          min-width: 32px;
          text-align: right;
        }

        .legend-value {
          color: #8f9bb3;
          font-size: 12px;
          font-weight: 500;
          min-width: 24px;
          text-align: right;
        }
      }
    }
  }

  // 响应式调整
  @media (max-width: 1200px) {
    .stat-content {
      gap: 15px;
      padding: 12px;

      .chart-container {
        .circle-progress {
          max-width: 140px;
          max-height: 140px;
        }

        .device-total-center {
          .total-number {
            font-size: 24px;
          }
          .total-label {
            font-size: 10px;
          }
          .total-unit {
            font-size: 9px;
          }
        }
      }

      .stat-legend .legend-item {
        padding: 6px 0;

        .legend-name {
          font-size: 12px;
        }
        .legend-percent {
          font-size: 13px;
        }
        .legend-value {
          font-size: 11px;
        }
      }
    }
  }

  @media (max-width: 1024px) {
    .stat-content {
      gap: 12px;
      padding: 10px;

      .chart-container {
        .circle-progress {
          max-width: 120px;
          max-height: 120px;
        }

        .device-total-center {
          .total-label {
            font-size: 10px;
          }
          .total-number {
            font-size: 24px;
          }
          .total-unit {
            font-size: 9px;
          }
        }
      }

      .stat-legend .legend-item {
        padding: 5px 0;
        gap: 8px;

        .legend-name {
          font-size: 11px;
        }
        .legend-percent {
          font-size: 12px;
        }
        .legend-value {
          font-size: 10px;
        }
      }
    }
  }

  @media (max-width: 950px) {
    .stat-content {
      gap: 10px;
      padding: 8px;

      .chart-container {
        .circle-progress {
          max-width: 100px;
          max-height: 100px;
        }

        .device-total-center {
          .total-label {
            font-size: 9px;
          }
          .total-number {
            font-size: 20px;
          }
          .total-unit {
            font-size: 8px;
          }
        }
      }

      .stat-legend .legend-item {
        padding: 4px 0;

        .legend-dot {
          width: 8px;
          height: 8px;
          margin-right: 8px;
        }

        .legend-name {
          font-size: 10px;
        }
        .legend-percent {
          font-size: 11px;
        }
        .legend-value {
          font-size: 9px;
        }
      }
    }
  }
}
</style>
